<!DOCTYPE html>
<script src='../../resources/js-test.js'></script>
<style>
#flexbox { display: flex; }
#grid { display: grid; }
</style>
<div id=foo></div>
<div id="flexbox"><div id="flexitem"></div></div>
<div id="grid"><div id="griditem"></div></div>
<script>
var div = document.getElementById('foo');
shouldBe('div.style.minWidth', '""');
shouldBe('getComputedStyle(div)["min-width"]', '"0px"');

div.style.minWidth = 'auto';
div.style.maxWidth = 'auto';
shouldBe('div.style.minWidth', '"auto"');
shouldBe('div.style.maxWidth', '""');
shouldBe('getComputedStyle(div).minWidth', '"0px"');

div.style.minWidth = 0;
shouldBe('div.style.minWidth', '"0px"');
shouldBe('getComputedStyle(div)["min-width"]', '"0px"');

shouldBe('div.style.minHeight', '""');
shouldBe('getComputedStyle(div)["min-height"]', '"0px"');

div.style.minHeight = 'auto';
div.style.maxHeight = 'auto';
shouldBe('div.style.minHeight', '"auto"');
shouldBe('div.style.maxHeight', '""');
shouldBe('getComputedStyle(div).minHeight', '"0px"');

div.style.minHeight = 0;
shouldBe('div.style.minHeight', '"0px"');
shouldBe('getComputedStyle(div)["min-height"]', '"0px"');

var flexitem = document.getElementById("flexitem");
shouldBe('flexitem.style.minWidth', '""');
shouldBe('getComputedStyle(flexitem)["min-width"]', '"auto"');

flexitem.style.minWidth = 'auto';
flexitem.style.maxWidth = 'auto';
shouldBe('flexitem.style.minWidth', '"auto"');
shouldBe('flexitem.style.maxWidth', '""');
shouldBe('getComputedStyle(flexitem).minWidth', '"auto"');

flexitem.style.minWidth = 0;
shouldBe('flexitem.style.minWidth', '"0px"');
shouldBe('getComputedStyle(flexitem)["min-width"]', '"0px"');

shouldBe('flexitem.style.minHeight', '""');
shouldBe('getComputedStyle(flexitem)["min-height"]', '"auto"');

flexitem.style.minHeight = 'auto';
flexitem.style.maxHeight = 'auto';
shouldBe('flexitem.style.minHeight', '"auto"');
shouldBe('flexitem.style.maxHeight', '""');
shouldBe('getComputedStyle(flexitem).minHeight', '"auto"');

flexitem.style.minHeight = 0;
shouldBe('flexitem.style.minHeight', '"0px"');
shouldBe('getComputedStyle(flexitem)["min-height"]', '"0px"');

var griditem = document.getElementById("griditem");
shouldBe('griditem.style.minWidth', '""');
shouldBe('getComputedStyle(griditem)["min-width"]', '"auto"');

griditem.style.minWidth = 'auto';
griditem.style.maxWidth = 'auto';
shouldBe('griditem.style.minWidth', '"auto"');
shouldBe('griditem.style.maxWidth', '""');
shouldBe('getComputedStyle(griditem).minWidth', '"auto"');

griditem.style.minWidth = 0;
shouldBe('griditem.style.minWidth', '"0px"');
shouldBe('getComputedStyle(griditem)["min-width"]', '"0px"');

shouldBe('griditem.style.minHeight', '""');
shouldBe('getComputedStyle(griditem)["min-height"]', '"auto"');

griditem.style.minHeight = 'auto';
griditem.style.maxHeight = 'auto';
shouldBe('griditem.style.minHeight', '"auto"');
shouldBe('griditem.style.maxHeight', '""');
shouldBe('getComputedStyle(griditem).minHeight', '"auto"');

griditem.style.minHeight = 0;
shouldBe('griditem.style.minHeight', '"0px"');
shouldBe('getComputedStyle(griditem)["min-height"]', '"0px"');
</script>
